<template>
  <el-aside class="app-aside" width="200px">
    <el-menu
      class="app-menu"
      :default-active="curAside"
      :router="true"
      :unique-opened="true"
      :default-openeds="defaultOpends">
      <div
        v-for="(item, index) in navList"
        :key="index">
        <el-menu-item
          v-if="!item.child.length"
          :index="item.path">
          <i class="iconfont" :class="item.icon"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
        <el-submenu
          v-else
          :index="item.path">
          <template slot="title">
            <i class="iconfont" :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="(jItem, jIndex) in item.child"
              :key="jIndex"
              :index="jItem.path">
              <template slot="title">
                <i class="iconfont" :class="jItem.icon"></i>
                <span>{{ jItem.name }}</span>
              </template>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </div>
    </el-menu>
  </el-aside>
</template>
<script>
const nav = [
  { pid: '0', id: '1', name: '首页', path: '/main', icon: 'icon-home', },
  { pid: '0', id: '2', name: '教程', path: 'course', icon: 'icon-jiaoxue' },
  { pid: '2', id: '3', name: '全部教程', path: '/main/course', icon: 'icon-xuexi' },
  { pid: '2', id: '4', name: '小学教程', path: '/main/course/primary', icon: 'icon-primary' },
  { pid: '2', id: '5', name: '初中教程', path: '/main/course/middle', icon: 'icon-middle' },
  { pid: '2', id: '5', name: '高中教程', path: '/main/course/high', icon: 'icon-high' },
  { pid: '0', id: '7', name: '管理', path: 'manage', icon: 'icon-manage' },
  { pid: '7', id: '8', name: '用户列表', path: '/main/userList', icon: 'icon-user' },
  { pid: '0', id: '9', name: '学历', path: '/main/education', icon: 'icon-xuexi', },
  { pid: '0', id: '10', name: '年级', path: '/main/grade', icon: 'icon-grade', },
  { pid: '7', id: '11', name: '学校管理', path: '/main/manage/school', icon: 'icon-xuexi', },
  { pid: '7', id: '12', name: '讲师管理', path: '/main/manage/teacher', icon: 'icon-grade', },
  { pid: '7', id: '13', name: '学生管理', path: '/main/manage/student', icon: 'icon-grade', }
]

export default {
  data () {
    return {
      defaultOpends: [],
      navList: []
    }
  },
  computed: {
    curAside() {
      const path = this.$route.path
      this.defaultOpends = []
      const curNav = nav.find((item) => item.path === path) || { pid: '' }
      const parentNav = nav.find((item) => item.id === curNav.pid)
      this.defaultOpends = parentNav && parentNav.path ? [parentNav.path] : []
      return path
    }
  },
  methods: {
    init () {
      const navList = []
      nav.forEach(item => {
        if (item.pid === '0') {
          const first = Object.assign({}, item)
          first.child = []
          navList.push(first)
        }
      })
      navList.forEach(item => {
        nav.forEach(jItem => {
          if (item.id === jItem.pid) {
            const second = Object.assign({}, jItem)
            second.child = []
            item.child.push(second)
          }
        })
      })
      this.navList = navList.slice(0)
    }
  },
  created () {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
  @import "../assets/scss/var.scss";
  .app-aside {
    max-height: 100%;
    overflow-y: auto;
    position: relative;
    z-index: 200;
    box-sizing: border-box;
  }
  .app-menu {
    height: 100%;
  }
</style>
